<script setup name="FrmProcessManage">
import { ref,onMounted } from "vue";
import {selectData1,saveData1,updateFun,insertFun,biaoshi,saveDataSon  } 
from "@/utils/InsertDeleteSelectUpdatesLz";
import { ElMessage } from 'element-plus';
 const tableRef1=ref(null);
 const tableRef2=ref(null);
const dataSourceTableConstZuoChe = ref([]);
const dataSourceTableConstYuoChe = ref([]);
const inputValue=ref("");
const sfzyList=ref(
    { name: 'VxeSelect',options: [
    {value: '1', label: '停用' },
    { value: '0', label: '在用' },
    { value: '', label: '' } 
    ]}   
) 

//左侧菜单表格，带条件
const select1=async ()=>{
    dataSourceTableConstZuoChe.value=await  selectData1('100115',{"mc":inputValue.value},"");
    dataSourceTableConstZuoChe.value=dataSourceTableConstZuoChe.value.ReContent;
    console.log(dataSourceTableConstZuoChe);
    if(dataSourceTableConstZuoChe.value.length>=0 ){
        console.log(dataSourceTableConstZuoChe.value[0].processId);
        select2({row:{processId:dataSourceTableConstZuoChe.value[0].processId}},2,tableRef1)
    }
}

//选择菜单后根据菜单类别获取右边列表的明细数据
var row1={row:{processId:""}};
const select2=async (row,x ,tableName)=>{
    
    //把当前行的类别记录下来后面保存的时候刷新右侧的表格的时候用
    row1.row.processId =row.row.processId;
    dataSourceTableConstYuoChe.value=await  selectData1('100116',{"bh":row.row.processId},"");
    dataSourceTableConstYuoChe.value=dataSourceTableConstYuoChe.value.ReContent;
    
    if(x==3 ){
        update1(row,3,tableName) ;
    }
}
const insert1=(i,tableName)=>{
    
   
    // 0左侧1右侧表格
    if(i==0){
        dataSourceTableConstYuoChe.value=[];
        const insertObj={
            processId:'',
            processName:'',
            processLb:'',
            sfconfig:'0',
            sfqy:'1',
            zdr:'0000',
            saveflag: 1,
            zdrq:'2024-11-28' ,
            xgrq:'',
            bz: '我是备注' ,
            mxb:dataSourceTableConstYuoChe
        };

        console.log(insertObj)
        insertFun(insertObj ,dataSourceTableConstZuoChe.value,tableName);
    }
    else if(i==1){

        var k=1; 
        var id='';
        if(dataSourceTableConstYuoChe.value.length!=0  ){
            k=dataSourceTableConstYuoChe.value.length-1;
            id=dataSourceTableConstYuoChe.value[k].processId;
            k=dataSourceTableConstYuoChe.value[k].xh+1;
           
        }
        const insertObj={
            Errmsg: null,
            auditDept: null,
            auditPerson: "1071",
            cfys: null,
            jzr: null,
            processId:  id,
            saveflag: 1,
            sfqy: "1",
            tj: "0101",
            xgrq: null,
            xh:k ,
            zdr: "0000",
            zdrq: "2024-11-27 11:28:01",
            zxxh: null
        };
        insertFun(insertObj ,dataSourceTableConstYuoChe.value,tableName);
    }
}

const update1=(row ,i ,tableName )=>{
     
    updateFun(row,i,dataSourceTableConstYuoChe.value,tableName);
}
const updateZuo=(row ,i,tableName )=>{
    updateFun(row,i,dataSourceTableConstZuoChe.value,tableName,dataSourceTableConstYuoChe.value);
}
const save1=async ()=>{
    const res=await saveData1('100117','',dataSourceTableConstZuoChe.value);
    if(res !=undefined){
        console.log(res );
        if(res.Flag==true){
            select1();
            ElMessage({
                showClose: true,
                message: '保存数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
        }
    }
}

//删除
const delete1=( tableName)=>{
    const $table = tableName;
    const selectRecords = $table.getCurrentRecord();
    dataSourceTableConstZuoChe.value[$table.getRowSeq(selectRecords)-1].saveflag=3;
    save1();

}

const cancelEvent = (value) => {
    if(value.$event.key=='Enter'){
        select1();
    }
} 


//右侧明细表的保存和删除
const save2=async ()=>{
    const res=await saveData1('100118','',dataSourceTableConstYuoChe.value);
    if(res !=undefined){
        console.log(res );
        if(res.Flag==true){
            
            select2(row1 ,2,tableRef1 );
            ElMessage({
                showClose: true,
                message: '成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
        }
    }
}
//删除
const delete2=( tableName)=>{
    const $table = tableName;
    const selectRecords = $table.getCurrentRecord();
    dataSourceTableConstYuoChe.value[$table.getRowSeq(selectRecords)-1].saveflag=3;
    save2();

}




onMounted(()=>{
    select1();
    //  console.log(dataSourceTableConstZuoChe.value );
}) 
</script>

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="main-content-title">
            <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">流程名称</div>
            </div>
            <el-input v-model="inputValue" style="width: 180px;margin-left: 8px;"/>
            <el-button 
                type="primary" 
                :icon="Search" 
                style="width:72px;margin-left: 16px;" 
                @click="select1()">
                查询
            </el-button>
        </div>
        <div class="main-content-line"></div>

        <div class="main-content-content">
            <div class="main-content-left">
                <div class="main-content-left-button"> 
                    <div class="button-case">
                    <div class="button-case-box " @click="insert1(0,tableRef1)">
                    <img
                    src="../../../assets/images/add_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                    <div>新增主表</div>
                    </div>
                    <div class="button-case-box"  > 
                        <img
                            src="../../../assets/images/del_icon.png"
                            style="width: 16px; height: 16px; margin-right: 2px"
                            alt=""
                            srcset=""
                            />
                        <el-popconfirm title="确认删除吗?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        @confirm="delete1(tableRef1)"
                        @cancel="cancelEvent"
                        >
                        <template #reference>
                            <div>删除主表</div>
                        </template>
                        </el-popconfirm>   
                    </div> 

                    <div class="button-case-box"  > 
                        <img
                            src="../../../assets/images/save_icon.png"
                            style="width: 16px; height: 16px; margin-right: 2px"
                            alt=""
                            srcset=""
                            />
                        <el-popconfirm title="确认保存吗?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        @confirm="save1()"
                        @cancel="cancelEvent"
                        >
                        <template #reference>
                            <div>保存</div>
                        </template>
                        </el-popconfirm>   
                    </div>   
                    
                    </div> 
                </div>
                <div class="main-content-left-table">
                    <vxe-table
                    ref="tableRef1"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConstZuoChe"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => updateZuo(row,1,tableRef1)"     
                    @edit-closed="(row) => updateZuo(row,2,tableRef1 )"    
                    @cell-click="(row) => select2(row,3,tableRef1 )"   
                >
                        <vxe-column field="saveflag" title="标识" width="60">
                        <template  #default="{ row }">
                            <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
                        </template>
                        </vxe-column>
                        <vxe-column field='processId'   title='流程ID'   width=170  >
                        </vxe-column>
                        <vxe-column field='processName'   title='流程名称'  width=150   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='processLb'   title='流程类别'      width=80   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='sfconfig'   title='是否按顺序确认'      width=150   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='sfqy'   title='是否启用'      width=80   :edit-render=sfzyList>
                        </vxe-column>
                        <vxe-column field='zdr'   title='制单人'      width=80   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='zdrq'   title='制单时间'      width=80   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='xgrq'   title='修改日期'      width=80  :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='bz'   title='备注'      width=200 :edit-render="{name: 'input'}">
                        </vxe-column>
                    </vxe-table> 
                </div>
            </div>

            <div class="main-content-right"> 
                <div class="main-content-right-button"> 
                    <div class="button-case">
                        <div class="button-case-box " @click="insert1(1,tableRef2)">
                        <img
                        src="../../../assets/images/add_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>新增明细</div>
                        </div>
                        <div class="button-case-box"  > 
                            <img
                                src="../../../assets/images/del_icon.png"
                                style="width: 16px; height: 16px; margin-right: 2px"
                                alt=""
                                srcset=""
                            />
                            <el-popconfirm title="确认删除吗?"
                            confirm-button-text="确认"
                            cancel-button-text="取消"
                            @confirm="delete2(tableRef2)"
                            @cancel="cancelEvent"
                            >
                                <template #reference>
                                    <div>删除明细</div>
                                </template>
                            </el-popconfirm>   
                        </div> 
                        <div class="button-case-box"  > 
                            <img
                                src="../../../assets/images/save_icon.png"
                                style="width: 16px; height: 16px; margin-right: 2px"
                                alt=""
                                srcset=""
                                />
                            <el-popconfirm title="确认保存吗?"
                            confirm-button-text="确认"
                            cancel-button-text="取消"
                            @confirm="save2()"
                            @cancel="cancelEvent"
                            >
                            <template #reference>
                                <div>保存</div>
                            </template>
                            </el-popconfirm>   
                        </div> 
                    </div> 
                </div>

                <div class="main-content-right-table">
                    <vxe-table
                    ref="tableRef2"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConstYuoChe"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => update1(row,1,tableRef2)"   
                    @edit-closed="(row) => update1(row,2,tableRef2)"      
                    @cell-click="(row) => update1(row,3,tableRef2)"     
                >
                        <vxe-column field="saveflag" title="标识" width="60">
                        <template  #default="{ row }">
                            <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
                        </template>
                        </vxe-column>
                        <vxe-column field='xh'   title='序号'   width= 70  >
                        </vxe-column>
                        <vxe-column field='zxxh'   title='执行序号'  width=150   >
                        </vxe-column>
                        <vxe-column field='auditDept'   title=' 审批科室'      width=80   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='auditPerson'   title='审批人'      width=80   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='cfys'   title='处方医生审批'      width=120   :edit-render=sfzyList>
                        </vxe-column>
                        <vxe-column field='jzr'   title='记账人审批'      width=100   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='tj'   title='条件'      width=80   :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='sfqy'   title='是否启用'  width=80  :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='zdr'   title='制单人'    width=200 :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='zdrq'   title='制单日期'  width=200 :edit-render="{name: 'input'}">
                        </vxe-column>
                        <vxe-column field='xgrq'   title='修改日期'  width=200 :edit-render="{name: 'input'}">
                        </vxe-column>
                    </vxe-table> 
                </div>
            </div>
        </div> 
    </div>
</div>
</template>

<style lang="scss" scoped>
:deep(.vxe-body--column) {
    padding-top: 0px !important; 
    padding-bottom: 0px !important; 
}
:deep(.vxe-cell) {
    padding-left: 8px !important; 
    padding-right:8px !important; 
}
:deep(.vxe-body--row) {
    height: 34px !important; 
}
:deep(.vxe-default-input) {
    padding-left: 0px !important; 
    padding-right: 0px !important; 
    border-left: none;
}

 

.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .main-content-title{
        height: 32px;
        width: 100%;
        display: flex;
        margin-bottom: 12px;
         
        .admin-case-top {
            display: flex;
            align-items: center;
            margin-right: 12px;
  
    }


        
    }
    .main-content-line{
        height: 1px;
        width: 100%;
        border: 1px solid #EBEBEB;
    }

    .main-content-content{
        margin-top: 12px;
        width: 100%;
        height: calc(100% - 56px);
        display: flex;
        .main-content-left{
            width: calc(calc(100% - 12px) / 2);  
            margin-right: 12px;
            height:100%;
             
            .main-content-left-button{
                height: 40px;
                width: 100%;
                border-radius: 4px 4px 0px 0px;
                border: 1px solid #EBEBEB;
                .button-case{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #333333;         
                    height: 100%;
                    padding-left: 12px;
                    .button-case-box {
                        display: flex;
                        align-items: center;
                        margin-right: 12px;
                        cursor: pointer; /* 可选：使光标变为指针，表示可点击 */ 
                    }
                }
            }
            .main-content-left-table{
                height: calc(100% - 40px);
                width: 100%;
                background-color: rgb(168, 11, 11);
            }
        }
        .main-content-right{
            width: calc(calc(100% - 12px) / 2);
            height:100%;
            border-radius: 4px 4px 0px 0px;
            border: 1px solid #EBEBEB;
            .main-content-right-button{
                height: 40px;
                width: 100%;
                 
                .button-case{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #333333;         
                    height: 100%;
                    padding-left: 12px;
                    .button-case-box {
                        display: flex;
                        align-items: center;
                        margin-right: 12px;
                        cursor: pointer; /* 可选：使光标变为指针，表示可点击 */ 
                    }
                }
            }
            .main-content-right-table{
                height: calc(100% - 39px);
                width: 100%;
                
            }
        }
        

    }


   
   
    .main-content-table{

        width: 100%;
        height: calc(100% - 85px);
         
    }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontText-align{
  text-align: left;
}
.xpFontColor{
    color: #333333;
}
</style>